<style type="text/css">
    .content {
        padding: 25px 20px;
    }

    /* 订单详情 */
    .order-detail .order-block {
        height: 31px;
        line-height: 31px;
        background: #e8edf0;
        border-radius: 13px;
        font-size: 14px;
        text-align: center;
        position: relative;
        margin-bottom: 50px;
    }

    .order-detail .order-block:before,
    .order-detail .order-block:after {
        content: "";
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 13px;
        background: #18bc9c;
    }

    .order-detail .order-block:after {
        background: #4dc7af;
        z-index: 1;
    }

    .order-detail .order-block.progress-1:before {
        width: 0;
    }

    .order-detail .order-block.progress-1:after {
        width: 20%;
    }

    .order-detail .order-block.progress-2:before {
        width: 20%;
    }

    .order-detail .order-block.progress-2:after {
        width: 40%;
    }

    .order-detail .order-block.progress-3:before {
        width: 40%;
    }

    .order-detail .order-block.progress-3:after {
        width: 60%;
    }

    .order-detail .order-block.progress-4:before {
        width: 60%;
    }

    .order-detail .order-block.progress-4:after {
        width: 80%;
    }

    .order-detail .order-block.progress-5:before {
        width: 100%;
    }

    .order-detail .order-block.progress-5:after {
        width: 100%;
    }

    .order-detail .order-block.progress-5 li:nth-child(5) {
        color: #fff;
    }

    .order-detail .order-block li {
        width: 20%;
        float: left;
        list-style-type: none;
        border-radius: 13px;
        position: relative;
        z-index: 3;
    }

    .order-detail .order-block .tip {
        font-size: 12px;
        padding-top: 10px;
        color: #717171;
    }

    .order-detail .order-block.progress-1 li:nth-child(1),
    .order-detail .order-block.progress-2 li:nth-child(1),
    .order-detail .order-block.progress-3 li:nth-child(1),
    .order-detail .order-block.progress-4 li:nth-child(1),
    .order-detail .order-block.progress-5 li:nth-child(1) {
        color: #fff;
    }

    .order-detail .order-block.progress-2 li:nth-child(2),
    .order-detail .order-block.progress-3 li:nth-child(2),
    .order-detail .order-block.progress-4 li:nth-child(2),
    .order-detail .order-block.progress-5 li:nth-child(2) {
        color: #fff;
    }

    .order-detail .order-block.progress-3 li:nth-child(3),
    .order-detail .order-block.progress-4 li:nth-child(3),
    .order-detail .order-block.progress-5 li:nth-child(3) {
        color: #fff;
    }

    .order-detail .order-block.progress-4 li:nth-child(4),
    .order-detail .order-block.progress-5 li:nth-child(4) {
        color: #fff;
    }

    .order-detail .td__order-price {
        width: 200px;
        display: inline-block;
    }

    .order-head {
        width: 100%;
        padding: 12px 20px;
        margin-top: 60px;
        /* margin-bottom: 20px; */
        /* border-bottom: 1px solid #eef1f5; */
    }

    .order-head:not(:first-child) {
        margin-top: 0;
    }

    .order-head .title {
        position: relative;
        font-size: 1.5rem;
        color: #333;
    }

    .order-head .title::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 14px;
        background: #18bc9c;
        top: 4px;
        left: -12px;
    }

    .table-responsive .table>tbody>tr>td {
        text-align: center;
        vertical-align: middle;
        color: #676767;
    }

    .ordertext {
        margin: 0 30px;
    }

    .table-bordered {
        border: 1px solid #e8edf0;
    }

    .table-bordered>thead>tr>th,
    .table-bordered>tbody>tr>th,
    .table-bordered>tfoot>tr>th,
    .table-bordered>thead>tr>td,
    .table-bordered>tbody>tr>td,
    .table-bordered>tfoot>tr>td {
        border: 1px solid #e8edf0;
    }

    .table thead tr {
        background: #f8f9fb;
    }

    .order_price span {
        width: 70px;
        display: inline-block;
        text-align: right;
    }
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="row">
        <div class="col-md-12">
            {volist name="lists" id="list"}
            <div class="panel panel-default">
                <div class="panel-heading">商品信息</div>
                <div class="panel-body">
                    <p><span>订单号：</span><small>{$list.order_no}</small> <span style="margin-left: 30px;">买家：</span><small>{$list.user.nickname}</small><strong></strong></p>
                    <input type="hidden" name="order_id[]" value="{$list.id}">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th class="text-center">
                                <div class="th-inner">商品编码</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">主图</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">商品名称</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">购买规格</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">单价</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">数量</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">总价</div>
                            </th>
                            <!--<th class="text-center">
                                <div class="th-inner">优惠</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">实际支付</div>
                            </th>
                            <th class="text-center">
                                <div class="th-inner">运费</div>
                            </th>-->
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="$list.ordergoods" id="vo"}
                        <tr>
                            <td>{$vo.goods_sku_sn}</td>
                            <td>
                                <a href="javascript:">
                                    <img class="img-sm img-center" data-tips-image src="{$vo.image|cdnurl|htmlentities}">
                                </a>
                            </td>
                            <td><strong>{$vo.title}</strong></td>
                            <td>{$vo.difference}</td>
                            <td>{$vo.price}</td>
                            <td>{$vo.number}</td>
                            <td>
                                {$vo.price * $vo.number}
                            </td>
                            <!--<td>{$vo.discount_price}</td>
                            <td>{$vo.actual_payment}</td>
                            <td>{$vo.freight_price}</td>-->
                        </tr>
                        {/volist}
                        </tbody><tfoot>
                    <tr>
                        <th colspan="10" style="text-align: right;">
                            <span class="ordertext">商品总价：<samp class="text-red">￥{$list.pay.order_price}</samp></span>
                            <span class="ordertext">运费（{switch name="list.freight_type"}
								{case value="0"}运费叠加{/case}
								{case value="1"}以最低结算{/case}
								{case value="2"}以最高结算{/case}
								{/switch}）：<samp class="text-red">￥{$list.pay.freight_price}</samp> </span>
                            {if condition="$list.pay.score_price > 0"}<span class="ordertext text-green">积分抵扣价格：￥{$list.pay.score_price}</span>{/if}
                            {if condition="$list.pay.coupon_price > 0"}<span class="ordertext text-green">优惠券抵扣价格：￥{$list.pay.coupon_price}</span>{/if}
                            {if condition="$list.pay.oldstaff_price > 0"}<span class="ordertext text-green">旧物抵扣金额：￥{$list.pay.oldstaff_price}</span>{/if}
                            {if condition="$list.pay.system_price > 0"}<span class="ordertext text-green">非平台旧件抵扣金额：￥{$list.pay.system_price}</span>{/if}
                            {if condition="$list.pay.invoice_price > 0"}<span class="ordertext text-green">发票抵扣金额：￥{$list.pay.invoice_price}</span>{/if}
                            {if condition="$list.pay.discount_price > 0"}<span class="ordertext">优惠金额：<samp class="text-red">￥{$list.pay.discount_price}</samp> </span>{/if}
                            <span class="ordertext">实际支付：<samp class="text-red">￥{$list.pay.price}</samp></span>
                        </th>
                    </tr>
                    </tfoot>
                    </table>
                    <div style="color: #333;">
                        <p style="margin-bottom: 15px;">订单类型：
                            {switch name="list.order_type"}
                            {case value="0"}<span class="label label-info">{$list.order_type_text|htmlentities}</span>{/case}
                            {case value="1"}<span class="label label-warning">{$list.order_type_text|htmlentities}</span>{/case}
                            {case value="2"}<span class="label label-primary">{$list.order_type_text|htmlentities}</span>{/case}
                            {/switch}
                        </p>
                    </div>
                    {if !empty($list.images)}
                    <div style="color: #333;">
                        <p style="margin-bottom: 15px;">旧件图片：
                            {foreach name="$list.images" item="vo"}
                            <img src="{$vo}" alt="" data-tips-image width="100px" height="100px" style="margin: 2px">
                            {/foreach}
                        </p>
                    </div>
                    {/if}
                    {if condition="$list.tracking_number != ''"}
                        <p>物流单号：{$list.tracking_number}</p>
                    {/if}
                    <div style="color: #333;">
                        <p style="margin-bottom: 15px;">订单总价：
                            {if condition="$list.state==8 || $list.state==8"}
                            <strong>
                                <input type="text" name="price[]" id="price" value="{$list.pay.price}">
                            </strong>
                            {else/}
                            <strong><span>{$list.pay.price}</span></strong>
                            {/if}
                        </p>
                    </div>
                </div>
            </div>
            {/volist}
            {if condition="$list.state==8"}
            <div style="color: #333;">
                <p style="margin-bottom: 15px;">审核状态：
                <strong>
                    <input type="radio" name="state" id="state_accept" value="1" checked> 通过&nbsp;&nbsp;
                    <input type="radio" name="state" id="state_reject" value="0"> 拒绝
                </strong>
                </p>
            </div>
            <div style="color: #333;display: none;" id="reject_reason_container">
                <p style="margin-bottom: 15px;">拒绝理由：
                    <textarea name="reject_reason" rows="3">

                    </textarea>
                </p>
            </div>
            {/if}
        </div>
    </div>
    {if condition="$list.state==8 || $list.state==8"}
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
    {/if}
</form>
<script>
    function toggleRejectReason() {
        var isRejected = document.getElementById('state_reject').checked;
        var rejectReasonContainer = document.getElementById('reject_reason_container');
        rejectReasonContainer.style.display = isRejected ? 'block' : 'none';
    }

    document.getElementById('state_accept').addEventListener('change', toggleRejectReason);
    document.getElementById('state_reject').addEventListener('change', toggleRejectReason);

    toggleRejectReason();
</script>
